<template>
  <div class="container">
    <!--  -->
    <!-- 左侧主要内容展示区 -->
    <div class="left">
      <div class="label">FoldPanel 组件</div>
      <div class="text">该组件用来隐藏一些信息</div>

      <div class="label">组件效果</div>
      <FoldPanel>
        <template #top>
          <div style="color: white">展现的部分</div>
        </template>
        <template #bottom>
          <div style="color: white">可以隐藏收起的部分</div>
        </template>
      </FoldPanel>

      <div class="label">组件使用示例</div>
      <HtmlShower :htmlStr="htmlStr1"></HtmlShower>
    </div>

    <!--  -->
    <!-- 右侧辅助功能栏 -->
    <div class="right"></div>
  </div>
</template>

<script lang="tsx" setup>
import { FoldPanel, HtmlShower } from '@/customComponents/components'

const htmlStr1 = `
      <FoldPanel>
        <template #top>
          <div style="color: white">展现的部分</div>
        </template>
        <template #bottom>
          <div style="color: white">可以隐藏收起的部分</div>
        </template>
      </FoldPanel>
`
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;

  > .left {
    width: 76%;
  }
  > .right {
    width: 24%;
  }
}

.label {
  font-size: 17px;
  color: #606266;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  padding-top: 30px;
  padding-bottom: 10px;
  user-select: none;
}

.text {
  line-height: 28px;
  letter-spacing: 1px;
  color: #444444;
}
</style>
